<template>
  <div class="homeOuter" :style="`background: url(${bgImg})`">
    <Header :headerNavindex="1" />
    <div class="homeMainTexe">
      <h3>楠寻</h3>
      {{ mainTextInfo.introduction }}
    </div>

    <!-- <Footer :fixed="true" /> -->
  </div>
  <div class="noticeOuter">
    <div class="notice">
      <h2>公告</h2>
      <div class="noticeMain">
        本博客所发布的各种软件文章仅限用于学习和研究目的；任何人不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我联系处理。
      </div>
    </div>
  </div>
  <Footer />
</template>

<script setup lang="ts">
import Header from "../../components/HeaderPage.vue";
import Footer from "../../components/FooterPage.vue";

import { reactive, ref, onMounted } from "vue";
import { getBgImgApi } from "../../service/apiModule/foregroundApi";


onMounted(() => {
  textTyping();
  getBgImg();
});

// 打字效果数据
const mainTextInfo = reactive({
  introduction: "",
  introductiontarget: "知识改变命运",
});

// 打字效果
let textI = 0; // 计数器
let textTimer: number | undefined = 0; // 计时器ID

// 打字效果逻辑
const textTyping = () => {
  if (textI <= mainTextInfo.introductiontarget.length) {
    mainTextInfo.introduction =
      mainTextInfo.introductiontarget.slice(0, textI++) + "_";
    clearInterval(textTimer);
    textTimer = setInterval(textTyping, 300);
  } else {
    mainTextInfo.introduction = mainTextInfo.introductiontarget;
    clearInterval(textTimer);
  }
};

let bgImg = ref("");
const getBgImg = async () => {
  const { data: res } = await getBgImgApi();
  if (res.status.code === 200) {
    res.data.forEach((item: any) => {
      if (item.bgTitle === "首页背景") {
        bgImg.value = item.imgSrc;
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.homeOuter {
  width: 100%;
  height: 100vh;
  background-color: orange;
  position: relative;

  .homeMainTexe {
    text-align: center;
    line-height: 80px;
    position: absolute;
    left: 50%;
    top: 26%;
    transform: translate(-50%, 0%);
    font-family: "楷体";
    font-size: 40px;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0 60px;
    border-radius: 20px;

    h3 {
      width: 100%;
      border-bottom: 2px solid orange;
    }
  }

  .recommendation {
    position: absolute;
    top: 76%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-height: 380px;
    background-color: rgba(233, 233, 233, 0.7);
    border-radius: 10px;
    padding: 10px;

    h3 {
      text-align: center;
      font-size: 36px;
      font-family: '楷体';
      font-weight: 600;
      margin-bottom: 10px;
    }

    .list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;

      li {
        height: 260px;
        width: 30%;
        border: 1px solid orange;
      }
    }
  }
}

.noticeOuter {
  background-color: rgb(225, 225, 225);
  padding: 20px;

  .notice {
    width: 60%;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
  }

  h2 {
    text-align: center;
    margin-bottom: 20px;
  }

  .noticeMain {
    width: 100%;
    padding: 0 40px;
  }
}
</style>
